<template>
	<view class="box">
		<view class="tab_view flex justify-between align-center">
			<view class="tab_item " v-for="(item,index) in tabAll" :key="item.type" :class="index==tabIndex?'alive':''"
				@click="tabClick(item,index)">
				{{item.title}}
			</view>
		</view>
		<!-- data.list couponList-->
		<view class="coupon_view flex align-center" v-for="(item,index) in data.list" :key="index"
			:style="{ opacity: item.is === 1? '.5' : '1' }">
			<view class="left flex flex-direction justify-center ">
				<view class="left_money">
					<text>￥</text>
					<text>{{item.coupon_number}}</text>
				</view>
				<!-- coupon_condition -->
				<view class="left_title flex  justify-center" v-if="item.coupon_condition >0">
					<!-- <text class="text-red">{{item.coupon_condition}}</text> -->
					<text>金额满减({{item.coupon_condition}})</text>
				</view>
				<view class="left_title flex flex-direction justify-center align-center" v-else>
					<text>无门槛</text>
					<text>(通用劵)</text>
				</view>
			</view>
			<view class="center" style="flex:7;">
				<view class="title1">
					{{item.title}}
				</view>
				<view class="title2">
					{{item.store_name}}
				</view>
				<view class="title2">
					{{item.date}}
				</view>
			</view>
			<view class="right" style="flex: 2;">
				<view class="right_buitton flex justify-center align-center" v-if="item.is==0">去使用</view>
				<view class="right_buitton flex justify-center align-center" v-else-if="item.is==1">已使用</view>
				<view class="right_buitton flex justify-center align-center" v-else>去使用</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		getCurrentInstance,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	let {
		proxy
	} = getCurrentInstance()
	let tabIndex = ref(0)
	let data = reactive({
		userIfon: null,
		list: []
	})
	let tabAll = reactive([{
		title: "全部",
		type: 0,

	}, {
		title: "已领取",
		type: 0,

	}, {
		title: "已使用",
		type: 0,

	}])
	let couponList = reactive([{
		money: 5,
		title: "新用户注册5元劵",
		store: "黑油台球-万达广场店",
		date: "有效期至2034-08-16",
		is: 0
	}, {
		money: 5,
		title: "新用户注册5元劵",
		store: "黑油台球-万达广场店",
		date: "有效期至2034-08-16"
	}, {
		money: 5,
		title: "新用户注册5元劵",
		store: "黑油台球-万达广场店",
		date: "有效期至2034-08-16",
		is: 0
	}, {
		money: 5,
		title: "新用户注册5元劵",
		store: "黑油台球-万达广场店",
		date: "有效期至2034-08-16",
		is: 1
	}])
	const tabClick = (itme, index) => {
		tabIndex.value = index
	}
	const getList = () => {
		proxy.$https('/read_user_coupon_api', {
			user_id: data.userIfon.user_id,
			// store_id: "6rr2HfMnuo",
		}).then(res => {
			data.list = res;
			console.log(data.list)
		})

	}
	onShow(() => {
		data.userIfon = getApp().globalData.userIfon
		getList()
	})
</script>

<style lang="scss" scoped>
	.box {
		padding: 0 32rpx;
	}

	.coupon_view {
		margin-top: 32rpx;
		height: 190rpx;
		background-image: url("../static/coupon.png");
		background-repeat: no-repeat;
		background-size: 100%;
		padding: 18rpx 12rpx;

		.left {
			padding: 0 0 0 10rpx;
			height: 100%;

			.left_money {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 40rpx;
				color: #EE5618;
			}

			.left_title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #666666;
				// line-height: 23rpx;
			}
		}

		.center {
			margin-left: 80rpx;

			.title1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
			}

			.title2 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;

				&:first-child {
					margin-top: 4rpx;
				}
			}
		}

		.right {
			.right_buitton {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #EA3610;
				width: 140rpx;
				height: 60rpx;
				background: linear-gradient(180deg, #FFFFFF 0%, #FFC9BD 100%);
				border-radius: 30rpx 30rpx 30rpx 30rpx;
			}
		}


	}

	.tab_view {
		margin-top: 32rpx;
		margin-bottom: 12rpx;

		.tab_item {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
		}

		.tab_item.alive {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				left: 0;
				bottom: -10rpx;
				width: 100%;
				height: 8rpx;
				background: linear-gradient(90deg, rgba(16, 199, 110, 0.6) 0%, rgba(16, 199, 110, 0.1) 100%);
				box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(16, 199, 110, 0.1);
				border-radius: 30rpx 30rpx 30rpx 30rpx;
			}
		}
	}
</style>